<template>
  <div class="box">
    <!--
   model : 绑定整个表单model值
   rules : 整个表单校验规则
   ref ：获取该表单form组件
   prop : 绑定每个表单的规则，写在el-form-item上
   validate : 对整个表单进行校验的方法
   valid : 每个必填表单项都提交为true,否则为false -->
    <div class="f1">
      <el-form
        :model="ruleForm1"
        status-icon
        :rules="rules"
        ref="ruleForm1"
        label-width="100px"
        class="demo-ruleForm"
        size="small"
      >
        <el-form-item label="登录名：" prop="username">
          <el-input
            type="text"
            v-model="ruleForm1.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称：" prop="name">
          <el-input
            type="text"
            v-model="ruleForm1.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="submitForm1('ruleForm1')"
            >确认修改</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="f2">
      <el-form
        :model="ruleForm2"
        status-icon
        :rules="rules"
        ref="ruleForm2"
        label-width="100px"
        class="demo-ruleForm"
        size="small"
      >
        <el-form-item label="原密码：" prop="oldpass">
          <el-input
            type="password"
            v-model="ruleForm2.oldpass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="newpass">
          <el-input
            type="password"
            v-model="ruleForm2.newpass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="submitForm2('ruleForm2')"
            >确认修改</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    var validateNewPass = (rule, value, callback) => {
      //    * 密码至少包含 数字和英文，长度6-20
      const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;

      if (!reg.test(value)) {
        callback(new Error("密码至少包含 数字和英文，长度6位"));
      } else {
        callback();
      }
    };
    var validateOldpass = (rule, value, callback) => {
      // 现获取当前登录用户名
      const { username } = JSON.parse(localStorage.getItem("userInfo"));
      //   console.log(username);
      //   发起请求，参数为当前登录用户名,用响应数据中的密码跟当前输入的密码对比是否一致
      //  以下为实验
      const password = "123457";
      if (value !== password) {
        callback(new Error("密码输入错误"));
      } else {
        callback();
      }
    };
    return {
      ruleForm1: {
        username: "",
        name: "",
      },
      ruleForm2: {
        // oldpass需要做验证，验证此用户当前输入的原密码是否跟登录进来的密码一致，若未一致，提示跟当前登录密码不一致
        oldpass: "",
        newpass: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur",
          },
        ],
        oldpass: [
          {
            required: true,
            message: "请输入原密码",
            trigger: "blur",
          },
          { validator: validateOldpass, trigger: "blur" },
        ],
        newpass: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
          { validator: validateNewPass, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getLogin();
  },
  methods: {
    getLogin() {
      this.$request
        .get("/adminUser/profile", {
          headers: {
            "X-Requested-With": "XMLHttpRequest",
            token: localStorage.getItem("token") || "",
          },
        })
        .then((data) => {
          this.ruleForm1.username = data.data.data.loginUserName;
          this.ruleForm1.name = data.data.data.nickName;
          console.log("data", data.data.data);
        });
    },
    submitForm1(formName) {
      this.$refs[formName].validate((valid) => {
        //    valid : 每个必填表单项都提交为true,否则为false
        if (valid) {
          console.log("submit!!");
          // 修改不得
          // this.$request
          //   .put("/adminUser/name", {
          //     loginUserName: this.ruleForm1.username,
          //     nickName: this.ruleForm1.name,
          //     headers: {
          //       "X-Requested-With": "XMLHttpRequest",
          //       token: localStorage.getItem("token") || "",
          //       'Content-Type':'application/json'
          //     },
          //   })
          //   .then((data) => {
          //     console.log(data);
          //     // ElMessage.success('修改成功')
          //     // window.location.reload();
          //   });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitForm2(formName) {
      console.log("this.$refs[formName]", this.$refs[formName]);
      this.$refs[formName].validate((valid) => {
        //    valid : 每个必填表单项都提交为true,否则为false
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  height: 100%;
  width: 1075px;
  margin: 0px 0px 0px 20px !important;
  overflow: hidden;
}
.el-input,
.el-textarea,
.el-select {
  width: 200px !important;
}
.el-form {
  margin: 30px;
}
.el-form-item {
  display: flex;
}
.f1 {
  height: 40%;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 12px 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 1073px;
}
.f2 {
  height: 40%;
  width: 1073px;
  overflow: hidden;
  box-shadow: 12px 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.el-button {
  margin-left: 100px !important;
}
</style>
